<template>
  <div>
    <el-card class="content">
      <el-form inline>
        <el-form-item label="开始时间" class="form">
          <el-col :span="30">
            <el-date-picker
              type="datetime"
              placeholder="选择开始日期"
              v-model="startTime"
              default-time="00:00:00"
              style="width: 100%"
              size="mini"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间" class="form">
          <el-col :span="30">
            <el-date-picker
              type="datetime"
              placeholder="选择结束日期"
              default-time="00:00:00"
              v-model="endTime"
              style="width: 100%"
              size="mini"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-col>
          <el-button type="primary" class="button" size="mini" @click="lookup"
            >查询</el-button
          >
          <el-button type="primary" size="mini" @click="dialogVisible = true"
            >+录入</el-button
          >
        </el-form-item>
        <el-row>
          <el-table
            :data="tableData"
            @row-click="openDetails"
            class="el-table-box"
          >
            <el-table-column prop="monitorCode" label="测点编号" align="center">
            </el-table-column>
            <el-table-column
              prop="monitorName"
              label="测点名称 "
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="beachTopElevation"
              label=" 滩顶高程(m)"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="drylandsValue"
              label="干滩长度(m)"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="exMonitorUser"
              label="测量人员"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="monitorTime" label="测量时间" align="center">
            </el-table-column>
            <el-table-column label="操作" prop="id" align="center">
              <el-button type="danger" size="mini" @click="open"
                >删除</el-button
              >
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.pagecount"
              :page-sizes="[10, 15]"
              :page-size="query.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-row>
        </el-row>
      </el-form>
      <el-dialog
        title="新增干滩人工监测数据"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <el-form
          :rules="rules"
          label-width="240px"
          label-position="right"
          :model="form"
          ref="form"
          inline
        >
          <el-form-item label="测点编号" class="formItem">
            <el-input
              placeholder="请输入内容"
              v-model="form.monitorCode"
              class="position"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="测点名称" class="formItem">
            <el-input
              placeholder="请输入内容"
              v-model="form.monitorName"
              class="position"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="干滩长度(m)" prop="monitorData" class="formItem">
            <el-input
              placeholder="请输入内容"
              v-model="form.monitorData"
              class="position"
            ></el-input>
          </el-form-item>
          <el-form-item label="监测地点" prop="position" class="formItem">
            <el-input
              placeholder="请输入内容"
              v-model="form.position"
              class="position"
            ></el-input>
          </el-form-item>
          <el-form-item label="测量人员" prop="exMonitorUser" class="formItem">
            <el-input
              placeholder="请输入内容"
              v-model="form.exMonitorUser"
              class="position"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="测量时间" class="formItem" prop="monitorTime">
            <el-date-picker
              v-model="form.monitorTime"
              type="date"
              placeholder="选择日期"
              class="position"
              :picker-options="pickerOptions0"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="newFormItem" label-width="300px">
            <el-button
              type="primary"
              @click="newlyadded"
              class="dialogVisible1"
              >确定</el-button
            >
            <el-button @click="cancel" class="dialogVisible2"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { getUserList } from "../../../api/api";
import {
  addManualMonitor,
  getDrylandsListByPage,
} from "../../../api/Monitoring";
import moment from "moment";
import axios from "axios";
import { BACKEND_ROOT } from "../../../Contants";
export default {
  name: "ManualMonitor",
  components: {},
  props: {
    node: Object,
    require: false,
  },
  data() {
    return {
      inline: false,
      dialogVisible: false,
      timeType: "24",
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      startTime: moment().subtract(1, "months").format("YYYY-MM-DD 00:00:00"),
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      query: {
        pagecount: 1,
        pagesize: 10,
      },
      total: null,
      tableData: [],
      form: {
        monitorCode: this.node.monitorCode,
        monitorName: this.node.name,
        monitorData: "",
        monitorUserId: "",
        monitorTime: "",
        exMonitorUser: "",
        // reportTime: null,
        // reportUser: null,
        position: "",
        // status: "1",
      },
      id: "",
      options: [],
      unitId: "",
      rules: {
        monitorData: [
          { required: true, message: "请输入监测数据", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请输入监测地点", trigger: "blur" },
        ],
        exMonitorUser: [
          { required: true, message: "请输入监测人员名称", trigger: "blur" },
        ],
        monitorTime: [
          { required: true, message: "请输入时间", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    cancel(){
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    async DrylandsListByPage() {
      let queryData = {
        startTime: moment(this.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      await getDrylandsListByPage({
        startTime: queryData.startTime,
        endTime: queryData.endTime,
        pageCount: this.query.pagecount,
        pageSize: this.query.pagesize,
        monitorTypeId: this.node.monitorTypeId,
        tailingPondId: this.node.tailingPondId,
        monitorCode: this.node.monitorCode,
        monitorName: this.node.monitorName,
      }).then((res) => {
        // let dxd = Number(datass[i].dx * datass[i].dx);
        // let dyd = Number(datass[i].dy * datass[i].dy);
        // datass[i].dp = Math.sqrt(1 + 2);
        let rres = Math.sqrt(1+2);
        console.log(rres);
        console.log(res);
        if (res.resultCode == "200") {
          this.tableData = res.parameter.list;
          this.query.pagecount = res.parameter.size;
          this.query.pagesize = res.parameter.pageSize;
          this.total = res.parameter.pages;
        } else {
          this.tableData = null;
          this.query.pagecount = 1;
          this.query.pagesize = 5;
          this.$message({
            message: "暂无数据",
            offset: 400,
            duration: 1000,
          });
        }
      });
    },
    lookup() {
      this.DrylandsListByPage();
    },
    // async userList() {
    //   await getUserList({}).then((res) => {
    //     // console.log(res);
    //     this.options = res.parameter;
    //   });
    // },
    async newlyadded() {
      let queryDatas = {
        reportTime: moment(this.form.reportTime).format("YYYY-MM-DD"),
        monitorTime: moment(this.form.monitorTime).format("YYYY-MM-DD"),
      };
      await this.$refs.form.validate((valid) => {
        if (valid) {
          // 向后台发送请求
          addManualMonitor({
            monitorCode: this.form.monitorCode,
            monitorName: this.form.monitorName,
            monitorData: this.form.monitorData,
            monitorTime: queryDatas.monitorTime,
            monitorTypeId: this.node.monitorTypeId,
            position: this.form.position,
            exMonitorUser: this.form.exMonitorUser,
            tailingPondId: this.node.tailingPondId,
            unitId: this.unitId,
          }).then((res) => {
            console.log(res);
            if (res.resultCode == 200) {
              this.DrylandsListByPage();
              this.$message({
                type: "success",
                message: "录入成功",
                offset: 400,
                duration: 1000,
              });
            } else {
              this.$message({
                type: "error",
                message: "录入失败",
                offset: 400,
                duration: 1000,
              });
            }
            this.$refs.form.resetFields();
            this.dialogVisible = false;
          });
        } else {
          //就像用户提示发生错误的消息
        }
      });
    },
    openDetails(row) {
      this.id = row.id;
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.remove();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            offset: 400,
            duration: 1000,
          });
        });
    },
    async remove() {
      await axios
        .get(
          `/manualMonitor/deleteManualMonitor/${this.id}/${this.node.monitorTypeId}`
        )
        .then((res) => {
          console.log(res);
          if (res.data.resultCode == 200) {
            this.DrylandsListByPage();
            this.$message({
              type: "success",
              message: "删除成功!",
              offset: 400,
              duration: 1000,
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
              offset: 400,
              duration: 1000,
            });
          }
        });
    },
    handleSizeChange(val) {
      this.DrylandsListByPage(val);
    },
    handleCurrentChange(val) {
      this.DrylandsListByPage(val);
    },
  },
  created() {
    this.form.reportUser = window.sessionStorage.getItem("id");
    this.unitId = window.sessionStorage.getItem("unitId");
    this.DrylandsListByPage();
    // this.userList();
  },
};
</script>

<style scoped>
.content {
  /* margin-top: 5px; */
  height: 90.5vh;
  margin-right: 5px;
  overflow: auto;
  width: 100%;
}
.el-form-item {
  margin-bottom: 0;
}
.button {
  margin-left: 10px;
}
.formItem {
  margin-top: 30px;
}
.position {
  width: 300px;
}
.newFormItem {
  margin-top: 20px;
}
.dialogVisible1 {
  margin-left: 250px;
}
.dialogVisible2 {
  margin-left: 50px;
}
.el-table-box {
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
  height: 73vh;
  overflow-y: auto;
}
.el-table::before { z-index: inherit; }
</style>